<template>
<div id='loginbig'>
  <NavBar>
    <div></div>
    <div slot="center">注册</div>
  </NavBar>

<div>
  <div class="mobilelogin">欢迎您！</div>
  <div class="username">
     <van-field
    v-model="username"
    name="用户名"
    label="用户名"
    placeholder="用户名"
    :rules="[{ required: true, message: '请填写用户名' }]"
  />
  </div>
<div class="username">

  <van-field v-model="phone" type="tel" label="手机号" placeholder="请输入手机号"  @blur="checkphone" />
</div>
  <div class="username" id="codevertify">
<van-field v-model="verify" label="验证码" placeholder="请输入验证码"></van-field>
    <div class="code" @mousedown="colorchange" @click="sendverify" :style="{color:verifycolor}">
      <div v-if="first">获取验证码</div>
    <div v-else>
      <van-count-down :time="time" format="ss" ref="aaa"></van-count-down>
    </div>
    </div>
  </div>
  <div class="username">
    <van-field v-model="password" type="password" label="密码" placeholder="请输入密码"/>
  </div>
<div class="returnlogin">
  <a href="/login">已有账号，返回登录页面</a>
</div>
  <div class="register">
    <van-button type="info" :disabled="!checked" @click="SendRegister">确认</van-button>
  </div>
  </div>
 <div class="agree">
    <van-checkbox v-model="checked" icon-size="15px" >同意<a>隐私政策、天翼账号认证服务条款和服务条款</a></van-checkbox>
  </div>

  </div>
</template>

<script>

import NavBar from "@/components/common/NavBar/NavBar";
import {checkPhone} from "@/network/checked_phone";
import {formRegister} from "@/network/Users/register";

export default {
name: "Login",
  components:{
  NavBar,

  },
    data() {
    return {
      username:'',
      phone: '',
      password:'',
      checked:'',
      verify:'',
      verifycolor:'blueviolet',
      time:60*1000,
      first:true,
    };
  },
  methods:{
  colorchange(){
    this.verifycolor='skyblue'
    console.log(this.verifycolor)
  },
    sendverify(){
    this.first=false
      // console.log(this.$refs.aaa.remain) #测试计时器复原
    },
    checkphone(){
    checkPhone(this.phone).then(res=>{
      console.log(res);
    })
    },
    SendRegister(){
      formRegister(this.username,this.phone,this.password,this.checked,this.verify).then(
          res=>{
            if(res.code==0){
              this.$toast.success('注册成功')
              this.$router.push('/editMessage')
            }
            else {
              this.$toast.fail(res.errmsg)
            }

          }
      )
    },

  },
  watch:{
  remain:function (newTime,Oldtime){
    console.log(this.time)
  }
  },
created() {
  console.log()
}
}
</script>

<style scoped>
.mobilelogin{
  text-align: center;
  padding-top: 10px;
  color: #000011;
}
#loginbig{
  height: 10000px;
  background-color: rgb(247, 248, 250);

}
#loginbig .username{
  padding-top: 25px;
  width: 300px;

  margin:0 auto ;
}
#loginbig .van-cell{
  border-radius:20px 20px 20px 20px;
}

.register{
    position: absolute;
  top:391px;
  left:60px;
  border-radius:20px 20px 20px 20px;

}
#loginbig .van-button{
  border-radius: 20px 20px 20px 20px;
width: 75px;
}
.agree{
  font-size: 14px;
  position: absolute;
  top:320px;
  margin: 0 auto;
  left: 15px;
}
.returnlogin{
  font-size: 14px;
  color: blue;
  position: absolute;
top: 405px;
left: 160px;
}
a:hover{
  color: blue;
}
#codevertify{
  /*position: absolute;*/
}
.code{
  position: absolute;
right: 48px;
top: 182px;
font-size: 12px;

}
.agree{
  font-size: 14px;
  position: absolute;
  top:500px;
  margin: 0 auto;
  left: 15px;
}
</style>